<template>
    <div>
        <div v-for="(item ,i) in acticle" :key="i" class="artic">
            <div style="margin-top:15px"><router-link :to="'/Details/' + item.title">{{ item.title }}</router-link></div>
            <div style="margin-top:20px">{{ item.count }}</div>
            <div style="margin-top:15px"><span>{{ item.time }} |</span>    <span> 评论(6) |</span>  <span>点赞(20)</span> </div>
        </div>
        <router-view />
    </div>
</template>
<script>
    import { Button, Popup } from 'vant';
    export default {
        name: 'Article',
        components: {
            [Button.name]: Button,
            [Popup.name]: Popup,
        },

        data() {
            return {
                acticle: [{ count: 'nodejs如何打酱油', title: '虎哥nodejs如何打酱油', test: 'node.js', time: '2020/03/02' }, { count: 'docker部署阿里云', title: 'dacker初始', test: '1', time: '2020/03/02' }, { count: 'docker部署阿里云', title: 'dacker初始', test: '1', time: '2020/03/02' }, { count: 'docker部署阿里云', title: 'dacker数据卷', test: '1', time: '2020/03/02' }, { count: 'docker部署阿里云', title: 'dacker初始', test: '1', time: '2020/03/02' }, { count: 'nodejs如何打酱油', title: '虎哥nodejs如何打酱油', test: 'node.js', time: '2020/03/02' }, { count: 'docker部署阿里云', title: 'dacker初始', test: '1', time: '2020/03/02' }, { count: 'docker部署阿里云', title: 'dacker初始', test: '1', time: '2020/03/02' }, { count: 'docker部署阿里云', title: 'dacker数据卷', test: '1', time: '2020/03/02' }, { count: 'docker部署阿里云', title: 'dacker初始', test: '1', time: '2020/03/02' }],
                open: true,
            };
        },
        created() {
            console.log(process.env.NODE_ENV);
            this.login();
        },
        methods: {
            async login() {
                const data = await this.$services.login({ method: 'post',
                                                          data: {
                                                              username: 'admin',
                                                              password: '123456',
                                                          } });
                console.log(data);
            },
        },
    };
</script>
s <style lang="less" scoped>
.artic{
    font-size: 16px;
    color: #ccc;

    a:link {
    color: LimeGreen !important;
}

  span{
      margin-right: 5px;
  }

}
</style>
